*{
    padding: 0px;
    margin: 0px;
}
body{
    padding: 50px 0;
    background-color: #FFF;
    font-size: 14px
    font-family:'Avenir';
    color: #555;
    -webkit-font-smoothing: antialiased;  /* 字体抗锯齿 */
    font-smoothing: antialiased;
}
.slider,.main{
    width: 100%;
    height: 400px;
    position: relative;
}
/*幻灯片区域*/
.main{
    overflow: hidden;
}
.main-i{}
.caption{
    position: absolute;
    right: 50%;
    top: 30%;
    z-index: 9;
    margin-right: 13%;
}
.caption h2{
    font-size: 40px;
    line-height: 50px;
    color: #B5B5B5;
    text-align: right;
}
.caption h3{
    font-size: 70px;
    line-height: 70px;
    color: #000000;
    text-align: right;
    font-family: 'Open Sans Condensed';
}
.main-i img{
    width: 100%;
    position: absolute;
    z-index: 1;
}
/*控制按钮区域*/
.ctrl{
    width: 100%;
    height: 13px;
    line-height: 13px;
    text-align: center;
    position: absolute;
    left: 0px;
    bottom: -13px;
    background-color: #f00;
}
.ctrl-i{
    display: inline-block;
    width: 150px;
    height: 13px;
    background-color: #666;
    box-shadow: 0 1px 1px rgba(0,0,0,.3);
    position:relative;
    margin-left: 1px;
}
.ctrl-i img{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 50px;
    z-index:999;
    opacity: 0;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
/* hover 到控制按钮的样式 */
.ctrl-i:hover{
    background-color: #f0f0f0;
}
.slider .ctrl .ctrl-i:hover img{
    bottom: 13px;
    opacity: 1;
    /*给缩略图添加倒影效果*/
    -webkit-box-reflect: below 0px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,.3)));
    box-reflect: below 0px gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,.3)));;
    opacity: 1;
}
/*active 当前展现的状态*/
.slider .ctrl .ctrl-i_active:hover,
.slider .ctrl .ctrl-i_active{background-color: #000;}
.slider .ctrl .ctrl-i_active:hover img{
    opacity: 0;
}
/*幻灯片切换的样式*/
.slider .main .main-i{
    position: relative;
    opacity: 0;
    right: 50%;
    top: 0;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    z-index: 2;
}
.slider .main .main-i h2,
.slider .main .main-i h3{
    opacity: 0;
    -webkit-transition: all .8s 1s;
    -o-transition: all .8s 1s;
    transition: all .8s 1s;
}
.slider .main .main-i h2{
    margin-right: 45px;
}
.slider .main .main-i h3{
    margin-right: -45px;
}

.slider .main .main-i_active h2,
.slider .main .main-i_active h3{
    margin-right: 0px;
    opacity: 1;
}
.slider .main .main-i_active{
    right: 0;
    opacity: 1;
}